/**
 * @Author: jipeng.Li
 * @Date: 2021-03-03 16:45:21
 * @LastEditors: jipeng.Li
 * @LastEditTime: 2021-03-03 16:45:21
 * @Description: 充值金额选择
 */
import React from 'react';
import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
import {
  fontColorBlack,
  fontColorCoffee,
  mainBgColorLightGray,
  px2dp
} from '@/styles';

const RechargePriceChoice = (props) => {
  const { price, priceList = [], priceItemClick, onChangePriceText } = props;
  return (
    <View style={styles.handleView}>
      <Text style={styles.rechargeTitle}>充值面额</Text>
      <View style={styles.priceChoice}>
        {
          priceList.map((item, index) => {
            return (
              <TouchableOpacity
                key={`priceChoice${item}`}
                onPress={() => priceItemClick && priceItemClick(item)}
                style={[styles.priceChoiceItem, price === item && { backgroundColor: '#FBF2DF' }]}
              >
                <Text
                  style={[
                    styles.priceChoiceItemText,
                    price === item && { color: fontColorCoffee }]}
                >
                  {`¥${item}`}
                </Text>
              </TouchableOpacity>
            );
          })
        }
      </View>
      <View style={styles.priceInputView}>
        <Text style={styles.priceInputTips}>自定义金额</Text>
        <TextInput
          style={styles.priceInput}
          placeholder={price}
          placeholderTextColor={fontColorBlack}
          multiline
          maxLength={11}
          defaultValue=''
          value={price}
          underlineColorAndroid='transparent'
          keyboardType='decimal-pad'
          onChangeText={text => {
            let newText = text !== '' && text.substr(0, 1) === '.' ? '' : text;
            newText = newText.replace(
              /^0+[0-9]+/g,
              '0'
            ); // 不能以0开头输入
            newText = newText.replace(/[^\d.]/g, ''); // 清除"数字"和"."以外的字符
            newText = newText.replace(/\.{2,}/g, '.'); // 只保留第一个, 清除多余的
            newText = newText.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3',); // 只能输入两个小数
            newText = newText
              .replace('.', '$#$')
              .replace(/\./g, '')
              .replace('$#$', '.');
            let inpValue = price;
            if (Number(newText) >= 100000) {
              inpValue = '100000';
            } else {
              inpValue = newText;
            }
            onChangePriceText && onChangePriceText(inpValue);
          }}
        />
        <View style={styles.priceCompany}>
          <Text style={styles.priceInputTips}>元</Text>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  handleView: {
    flex: 1,
    paddingHorizontal: px2dp(20)
  },
  rechargeTitle: {
    color: fontColorBlack,
    fontSize: px2dp(32),
    fontWeight: 'bold',
    marginVertical: px2dp(20)
  },
  priceChoice: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  priceChoiceItem: {
    alignItems: 'center',
    justifyContent: 'center',
    width: '30%',
    marginVertical: px2dp(10),
    height: px2dp(88),
    backgroundColor: mainBgColorLightGray,
    borderRadius: px2dp(12)
  },
  priceChoiceItemText: {
    color: '#666564',
    fontSize: px2dp(28)
  },
  priceInputView: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: px2dp(50),
    borderBottomWidth: px2dp(1),
    borderBottomColor: '#F0EFEF'
  },
  priceInputTips: {
    color: fontColorBlack,
    fontSize: px2dp(28)
  },
  priceInput: {
    flex: 1,
    fontSize: px2dp(48),
    fontWeight: 'bold',
    textAlign: 'right',
    color: fontColorBlack,
    paddingVertical: 0,
  },
  priceCompany: {
    height: '100%',
    flexDirection: 'column-reverse',
    justifyContent: 'space-between',
  },
});

export default RechargePriceChoice;
